<template>
  <div>
    <h2>
      svg 图标集合
      <span class="tips">(tips：单击名字复制代码)</span>
    </h2>
    <div class="icon_card">
      <div
        v-for="(i, key) in data"
        :key="key"
        class="icon_card__item"
      >
        <svgicon
          :name="key"
          width="2em"
          height="2em"
        />
        <p>
          <Clipboard
            :text="filterCode(key)"
            :placeholder="key"
          />
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import objModules from '@/icons/modules'
import Clipboard from '@/components/Clipboard/index.vue'
export default defineComponent({
  name: 'SvgIcon',
  components: {
    Clipboard
  },
  setup() {
    const data = objModules
    const filterCode = function(val) {
      const tel = `<svgicon name="${val}"/>`
      return tel
    }
    return {
      data,
      filterCode
    }
  }
})
</script>
<style lang="less" scoped>
.icon_card {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  margin: 15px auto;
  &__item {
    border: 1px solid #ddd;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px 4px;
    width: 140px;
    cursor: pointer;
    background: #fff;
    transition: transform .3s;
    border-radius: 8px;
    &:hover {
      box-shadow: 0px 0px 20px 6px #999;
      transform:scale(1.1, 1.1)
    }
  }
}
.tips {
  color: #3eaf7c;
  font-size: 14px;
}
</style>
